import React, { useCallback, useState } from "react";
import { ThemeProvider } from "styled-components";
import ThemeCase from "./pages/进阶/5、参考其他组件/2、${}不支持传入一个非样式组件";
// 样式组件只是一个拥有html+css的组件，而react的组件是有独立的html+css+js的整体
//  styled方法：
// 传入一个样式组件
// 生成一个新的样式组件，新的组件会继承原来的组件的html+ css,但是可以通过模板字符串覆盖css，
// 使用薪组件的时候还可以使用as属性改变html
// 传入一个非样式组件
//  会生成一个新组件，新组件会继承传入组件的html+css+js,也可以用as去替换html,用模板字符串添加
// 样式，但是会给原组件传入一个唯一类名，需要手动给需要改变样式的标签加上这个类名，样式才能生效
// 本质上这种情况就是给react组件包了一个高阶组件，这个高阶组件通过props给原组件传了一个有样式
// 的类名,返回一个在原组件的基础上加了一些样式的新组件

// 使用样式组件，如果传了一个真实的Dom属性，那样式组件会把这个属性添加到渲染出来的标签上，如果传了一个自定义属性，那样式组件会把这个自定义属性过滤掉，渲染出来的dom标签不会有这个属性，
// 不管你传的是真实的dom属性，还是自定义的属性，都可以在样式组件的模板语法中通过插入箭头函数的方式获取到，这样就实现了通过props对样式组件传值

const App = () => {

  
  return (
    <>
     <ThemeCase>11111</ThemeCase>
    </>
  );
};
export default App;
